<template>
  <div class="detail" :style="`background-image: linear-gradient(135deg, ${colors[0]}, ${colors[1]})`">
    <img :src="img" alt />

    <div class="card">
        <p>{{ content }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, inject, onBeforeMount, onBeforeUnmount } from "vue";
import { useRoute } from "vue-router";
import { getBingWallpaper, getInfo } from "@/api";

const img = ref("");

const route = useRoute();
const app = inject("app");

const content = ref('')
const colors = ref([])

onBeforeMount(() => {
  app.setIsBack(true);
  app.setIsTab(false);

  getBingWallpaper().then(res => {
    console.log("res biying === ", res);
    img.value = res.data.data.urls[8] || res.data.data.url || '';
  });

  getInfo().then(res => {
    console.log("res info === ", res);
    let obj = res.data[route.query.key].result

    if (route.query.key === 'proverb') {
        content.value = obj.front + ' ' + obj.behind
    } else {
        content.value = obj.content
    }
  })
});

onBeforeUnmount(() => {
  app.setIsBack(false);
  app.setIsTab(true);
});

onMounted(() => {
  colors.value = route.query.colors;
});
</script>

<style lang="scss" scoped>
.detail {
  width: 100vw;
  height: calc(100vh - 50px);
  padding-top: 70px;

  img {
    width: 90vw;
    height: 60vw;
    box-shadow: 0 0 3px #ccc;
    border-radius: 16px;
    object-fit: cover;
  }

  .card {
    width: 90vw;
    padding: 16px;
    border: 16px;
    box-shadow: 0 0 3px #ccc;
    background-color: #fff;
    border-radius: 16px;
    margin: 0 auto;
    box-sizing: border-box;
    margin-top: 16px;

    p {
      font-weight: 500;
    }
  }
}
</style>